import { useEffect, useState } from "react";
import "./App.css";

function App() {
  // 菜单项数据
  const [menuItems, setMenuItems] = useState([
    { id: "home", icon: "../icon/home.png", text: "首页" },
    { id: "search", icon: "../icon/full.png", text: "搜索" },
    { id: "settings", icon: "../icon/setting.png", text: "设置" },
  ]);
  // 正在拖动的索引
  const [dragIndex, setDragIndex] = useState<number | null>(null);

  // 交换函数
  const moveItem = (from: number, to: number) => {
    if (from === to) return;
    setMenuItems((items) => {
      const copy = [...items];
      const [removed] = copy.splice(from, 1);
      copy.splice(to, 0, removed);
      return copy;
    });
  };

  useEffect(() => {});
  return (
    <>
      <div className="menu-panel">
        {menuItems.map((item, idx) => (
          <div
            key={item.id}
            className="menu-item"
            draggable
            onDragStart={() => setDragIndex(idx)}
            onDragOver={(e) => {
              e.preventDefault();
            }}
            onDrop={() => {
              if (dragIndex !== null) moveItem(dragIndex, idx);
              setDragIndex(null);
            }}
            style={{
              opacity: dragIndex === idx ? 0.5 : 1,
              cursor: "grab",
            }}
          >
            <span className="menu-icon">
              <img src={item.icon} alt={item.text} />
            </span>
            <span className="menu-text">{item.text}</span>
          </div>
        ))}
      </div>
    </>
  );
}

export default App;
